<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializejson.min.js"></script>

</head>

<body>

    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">


            <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:100%">

        </div>

        <div data-options="region:'west',split:true" title="West" style="width:200px;">

            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>

        </div>
    </div>


    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:200px;padding:10px">
        <form id="ff">
            <input type="text" name="cateId" id="cateId" style="width:100%">
            <input type="hidden" name="_id" id="_id" style="width:100%">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="content" style="width:100%" data-options="label:'内容:',required:true">
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>

    <script>

        function doSearch(value) {
            console.log('You input: ' + value);

            $('#dg').datagrid({
                queryParams: {
                    title: value
                }
            });
        }

        $('#tt').tree({
            url: 'http://localhost:3000/cate/list/2',
            method: 'get',
            onClick: function (node) {
                $("#cateId").val(node._id);

                $('#dg').datagrid({
                    queryParams: {
                        cateId: node._id
                    }
                });
            }
        });

        $('#dg').datagrid({
            url: 'http://localhost:3000/news/list',
            method: 'post',
            fit: true,
            pagination: true,
            columns: [[

                { field: 'ck', checkbox: true },
                { field: 'title', title: '新闻标题', width: 100 },
                {
                    field: '_id', title: '操作', width: 80,
                    formatter: function (value, row, index) {

                        return "<a onclick=deleteRecord('" + row._id + "')>删除</a> <a onclick=editRecord('" + row._id + "')>修改</a> <a onclick=viewComments('" + row._id + "')>查看评论</a>"
                    }
                }
            ]],
            toolbar: [{
                text: '新增',
                iconCls: 'icon-add',
                handler: function () {
                    $('#dlg').dialog('open')
                }
            }, {
                text: '多个删除',
                iconCls: 'icon-cut',
                handler: function () {
                    deleteRecords();
                }
            }]
        })



        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function () {

                    // 新增和修改是同一个submit



                    var checkFormValidate = $(this).form('enableValidation').form('validate');
                    if (checkFormValidate) {

                        if ($("#cateId").val().trim().length > 0) {
                            var postData = $('#ff').serializeJSON();

                            if (postData._id.trim().length > 0) {
                                // 修改
                                $.ajax({
                                    url: 'http://localhost:3000/news/data/' + postData._id,
                                    method: 'put',
                                    data: postData
                                }).done(function (res) {
                                    $("#dlg").dialog('close');
                                    $("#dg").datagrid('reload');
                                    $('#ff').form('clear');
                                })
                            } else {
                                // 新增
                                delete postData._id;
                                $.ajax({
                                    url: 'http://localhost:3000/news/data',
                                    method: 'post',
                                    data: postData
                                }).done(function (res) {
                                    $("#dlg").dialog('close');

                                    $("#dg").datagrid('reload');
                                    $('#ff').form('clear');

                                })
                            }
                        } else {
                            alert('请选择分类')
                        }


                    } else {

                    }

                    // return $(this).form('enableValidation').form('validate');
                }
            });
        }
        function clearForm() {
            $('#ff').form('clear');
        }

        function deleteRecord(id) {
            $.ajax({
                type: 'delete',
                url: 'http://localhost:3000/news/data/' + id
            }).done(function (res) {
                $.messager.show({
                    title: '信息显示',
                    msg: res.message,
                    showType: 'show'
                });

                $("#dg").datagrid('reload');// 在另三方对表格进行操作
            })

        }

        function deleteRecords() {
            // 找到选中的checkbox记录
            // alert('找到选中的checkbox记录')
            var selections = $("#dg").datagrid('getSelections');
            var ids = [];
            for (var i = 0; i < selections.length; i++) {
                ids.push(selections[i]._id);
            }
            ids = ids.toString();
            $.ajax({
                url: 'http://localhost:3000/news/removes',
                type: 'post',
                data: {
                    ids: ids
                }
            }).done(function (res) {
                $.messager.show({
                    title: '信息显示',
                    msg: res.message,
                    showType: 'show'
                });
                $("#dg").datagrid('reload');// 在另三方对表格进行操作
            })

        }

        function editRecord(id) {
            // $('#dlg').dialog('open')
            // var rows = JSON.parse(rows);
            // id = rows._id;
            // $('#ff').form('load', rows);

            $.ajax({
                url: 'http://localhost:3000/news/data/' + id,
                type: 'get'
            }).done(function (res) {
                $('#ff').form('load', res);
                $('#dlg').dialog('open');
            })

        }
    </script>
</body>

</html>